<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>上海蜗牛登录页面</title>
    <script th:src="@{/js/jquery-3.6.3.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossOrigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossOrigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossOrigin="anonymous"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            position: relative;
            background: url(https://webimg.ziroom.com/2e7ce3a1-f5c1-4ba8-8ddb-bda67055a1f3.jpg) no-repeat fixed center/100% 100%;
        }



        .login {
            width: 360px;
            height: 390px;
            border: 3px solid white;
            border-radius: 15px; /* 圆角 */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            /* margin:auto; */
        }

        .h1 {
            font-size: 32px;
            line-height: 30px;
            font-weight: bold;
            color: #fa9111;
            padding: 10px 0;
            text-align: left;
            margin-left: 50px;
        }

    </style>
</head>
<body>
<div class="login">
    <h1 class="h1">租客登录</h1>
    <div class="container">
        <div class="row">
            <span th:if="${error_msg != null}" style="color:red;" th:text="${error_msg}"></span>
            <form method="post" action="/ziroom_portal/user/loginUser">

                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="username" class="col-sm-3 col-form-label">用户名</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control " id="username" name="username"
                               placeholder="请输入用户名">
                    </div>
                </div>



                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="password" class="col-sm-3 col-form-label">密码</label>
                    <div class="col-sm-7">
                        <input type="password" class="form-control" id="password" name="password"
                               placeholder="请输入密码">
                    </div>
                </div>

                <div class="form-group row"  >
                    <div class="col-sm-1"></div>
                    <label for="verifyCode" class="col-sm-3 col-form-label">验证码</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="verifyCode" name="verifyCode">
                    </div>
                </div>
                <div class="form-group row" >
                    <div class="col-sm-1"></div>
                    <div class="col-sm-7">
                        <a class="btn-mini" th:onclick="getVerifyCode()">获取验证码</a>
                    </div>
                </div>


                <div class="form-group row">
                    <div class="col-sm-2  "></div>
                    <button type="button" onclick="changePhone()" class=" btn btn-minn" style="font-size: 10px ; color: blue">
                        忘记用户名使用手机号登录
                    </button>
                </div>

                <div class="form-group row">
                    <div class="col-sm-2  "></div>
                    <div class="col-sm-6  ">
                        <button type="submit" style="font-size: 16px" class="btn btn-info">立即登录</button>
                    </div>
                    <div class="col-sm-4 ">
                        <button type="button" onclick="goToRegister()" style="font-size: 16px" class="btn btn-danger">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


</body>

<script>

    function getVerifyCode() {
        //-- ajax 发请求 通知后台发送邮件
        let username = $("#username").val()
        $.post("/ziroom_portal/user/loginmessage",{"username":username},function (response) {
            alert(response);
        })
    }

    function goToRegister() {
        //-- ajax 发请求 通知后台发送邮件
        location.href="/ziroom_portal/user/register"
    }



</script>

</html>
